<template>
	<view class="shopManage">
		<navBar class="s_navBar" isBack backColor="#fff" title="商品管理" color="#fff" background="transprant"></navBar>
		<view class="nar-bar">
			<view class="tabs">
				<u-tabs
				name="cate_name" 
				count="cate_count" 
				:list="list" 
				:is-scroll="false" 
				:current="current" 
				@change="change"
				bg-color="rgba(0,0,0,0)"
				active-color="#fff" 
				inactive-color="#606266"
				bar-width="60"></u-tabs>
			</view>			
		</view>
		<view class="positBox">
			<view class="searchBox">
				<view class="search">
					<view class="iconfont icon-search2"></view>
					<input confirm-type="search" type="text" value="" placeholder="搜索商品"/>
				</view>
			</view>
			<!-- 筛选 -->
			<view class="select u-dropdown" :style="dropdown?'':'overflow:hidden'">
				<u-dropdown @open="openFn" @close="closeFn" border-radius="28rpx" menuIcon="arrow-down-fill" menuIconSize="12rpx" inactive-color="#6C6C6C" active-color="#DBA954">
					<u-dropdown-item v-model="value1" :title="title1" @change="select1" :options="options1"></u-dropdown-item>
					<u-dropdown-item v-model="value2" :title="title2" @change="select2" :options="options2"></u-dropdown-item>
					<u-dropdown-item v-model="value3" :title="title3" @change="select3" :options="options3"></u-dropdown-item>
				</u-dropdown>
			</view>
		</view>
		<view class="content">
			<!-- 商品列表 -->
			<view class="shopList">
				<view class="item" v-for="(item,index) in shopList" :key="index">
					<view class="left" v-if="openStatus">
						<view class="selectSendOk" :class="{'sendActive':item.checked}" @click="toSelect(index)">
							<u-icon size="24" name="checkmark"></u-icon>
						</view>
					</view>
					<view class="rightBox">
						<view class="mid">
							<image :src="item.main_imgurl" mode=""></image>
						</view>
						<view class="right">
							<view class="top1 omit-2">
								{{item.product_title}}
							</view>
							<view class="bottom">
								<view class="top">
									库存：{{item.num}}
									<view class="num">销量：{{item.volume}}</view>
								</view>
								<view class="more">
									<span>¥ {{item.price}}</span>
									<view class="right">
										<image @click="openMoreBox(index)" :src="`${baseImg}/static/adminShop/more.png`" mode=""></image>
										<view class="moreBox" v-if="moreStatus && moreIndex==index">
											<view class="edit" @click="toShopEdit(item.product_id)">
												<i class="iconfont">&#xe650;</i>
												编辑
											</view>
											<view class="edit" @click="toDonwStore(item.product_id)" v-if="current==0 || current==1">
												<i class="iconfont">&#xe651;</i>
												下架
											</view>
											<view class="edit" @click="toUpStore(item.product_id)" v-if="current==2">
												<i class="iconfont">&#xe652;</i>
												上架
											</view>
											<view class="edit" @click="toReset(item.product_id)" v-if="current==3">
												<i class="iconfont">&#xe654;</i>
												还原
											</view>
											<view class="edit" @click="toDelShop(item.product_id)">
												<i class="iconfont">&#xe653;</i>
												删除
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view style="padding: 20rpx 0;">
					<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
				</view>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="btn">
			<view class="left" @click="allCheck">
				<template v-if="openStatus">
					<view class="selectSendOk" :class="{'sendActive':allChecked}">
						<u-icon size="24" name="checkmark"></u-icon>
					</view>
					全选
				</template>
			</view>
			<view class="btnList" v-if="!openStatus">
				<view class="btn_item active" @click="toMore">更多</view>
			</view>
			<view class="btnList" v-else>
				<view class="btn_item cancel" @click="toCancelOpen">取消</view>
				<view class="btn_item active" @click="toDonwALL" v-if="current==0 || current==1">批量下架</view>
				<view class="btn_item active" @click="toUpStoreAll" v-if="current==2">批量上架</view>
				<view class="btn_item active" @click="toResetAll" v-if="current==3">批量还原</view>
				<view class="btn_item active" @click="toDelShopAll">批量删除</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了~'
				},
				baseImg:this.$static,
				list: [
					{
						cate_name: '出售中'
					},{
						cate_name: '已售完'
					},{
						cate_name: '已下架',
					},{
						cate_name: '回收站'
					}
				],
				options1:[{
					label:'全部',
					value:0
				},{
					label:'从高到低',
					value:1
				},{
					label:'从低到高',
					value:2
				}],
				options2:[{
					label:'全部',
					value:0
				},{
					label:'从高到低',
					value:1
				},{
					label:'从低到高',
					value:2
				}],
				options3:[{
					label:'全部',
					value:0
				},{
					label:'从高到低',
					value:1
				},{
					label:'从低到高',
					value:2
				}],
				value1:'',
				value2:'',
				value3:'',
				title1:'销量',
				title2:'价格',
				title3:'库存',
				current: 0,
				navHeight:200,
				openStatus:false, //更多
				store_id:null,
				shopList:[], //列表
				// 更多
				moreIndex:null,
				moreStatus:false,
				dropdown:false,
				allChecked:false, //全选状态
			}
		},
		onLoad(options) {
			this.store_id = this.$store.state.index.sid
			// this.navHeight = 270 - (Number(this.$store.state.system.navBarHeight)*2)
			this.getSaleList()
		},
		onReachBottom() {
			this.page++
			// 获取商品列表(下拉加载更多)
			this.status = 'loading'
			let params = {
				page:this.page,
				pagesize:this.pagesize,
				keyword:this.keyword,
				store_id:this.store_id,
				volume_order:this.value1, //销量
				price_order:this.value2,//价格
				num_order:this.value3, //库存
				navStatus:this.current
			}
			this.$api.getSaleShop(params).then(res=>{
				if(res.code==1){
					if(!res.data.data.length){
						this.status = 'nomore'
					}else{
						this.status = 'loading'
					}
					res.data.data.map(item=>item.checked = false)
					this.shopList = this.shopList.concat(res.data.data)
					console.log(res,'在售商品列表-下拉加载更多')
				}
			})
		},
		methods:{
			// 获取商品列表
			getSaleList(){
				uni.showLoading({
					title:'加载中...'
				})
				this.page = 1
				let params = {
					page:this.page,
					pagesize:this.pagesize,
					keyword:this.keyword,
					store_id:this.store_id,
					volume_order:this.value1, //销量
					price_order:this.value2,//价格
					num_order:this.value3, //库存
					navStatus:this.current
				}
				this.$api.getSaleShop(params).then(res=>{
					if(res.code==1){
						if(res.data.data.length<10){
							this.status = 'nomore'
						}
						res.data.data.map(item=>item.checked = false)
						this.shopList = res.data.data?res.data.data:[],
						console.log(res,'在售商品列表')
					}
				})
				uni.hideLoading()
			},
			
			// 点击编辑进入商品编辑页
			toShopEdit(id){
				uni.navigateTo({
					url:'shopEdit?product_id='+id
				})
			},
			
			change(e){
				this.current = e
				console.log(this.current,'navnav')
				this.moreStatus = false
				this.openStatus = false
				this.value1 = ''
				this.value2 = ''
				this.value3 = ''
				this.getSaleList()
				this.allChecked = false
			},
			// 打开筛选(调整遮罩层级)
			openFn(){
				this.dropdown = true
			},
			closeFn(){
				this.dropdown = false
			},
			// 点击更多
			toMore(){
				this.openStatus = true
			},
			// 点击取消
			toCancelOpen(){
				this.openStatus = false
			},
			
			// 选择销量
			select1(e){
				console.log(e,'选择销量')
				this.value1 = e==0?'all':e==1?'desc':'ase'
				this.title1 = this.options1[e].label
				this.getSaleList()
			},
			// 选择价格
			select2(e){
				this.value2 = e==0?'all':e==1?'desc':'ase'
				this.title2 = this.options2[e].label
				this.getSaleList()
			},
			// 选择库存
			select3(e){
				this.value3 = e==0?'all':e==1?'desc':'ase'
				this.title3 = this.options3[e].label
				this.getSaleList()
			},
			
			// 单个选中
			toSelect(index){
				if(this.shopList[index].checked){
					this.shopList[index].checked = false
				}else{
					this.shopList[index].checked = true
				}
				let check = this.shopList.every(item=>item.checked)
				this.allChecked = check
			},
			
			// 全选按钮
			allCheck(){
				if(this.allChecked){
					this.allChecked = false
				}else{
					this.allChecked = true
				}
				this.shopList.map(item=>{
					item.checked = this.allChecked
				})
				console.log(this.allChecked,'全选')
			},
			
			// 打开每一项的更多按钮
			openMoreBox(index){
				this.moreIndex = index
				if(this.moreStatus){
					this.moreStatus = false
				}else{
					this.moreStatus = true
				}
				console.log(index,this.moreStatus,'openmore')
			},
			
			//选择单项商品下架
			 toDonwStore(id){
				uni.showModal({
					content:'确定下架该商品吗？',
					success:res=>{
						if(res.confirm){
							this.donwStore(id,'0')
						}
					}
				}) 
			 },
			 // 批量下架
			 toDonwALL(){
				let lstId = []
				this.shopList.map(item=>{
					if(item.checked){
						lstId.push(item.product_id)
					}
				})
				let id = lstId.join(',')
				console.log(id,'批量下架id')
				if(!id){
					uni.showToast({
						title:'请选择需要下架的商品',
						icon:'none'
					})
					return
				}else{
					uni.showModal({
						content:'确定要下架所选商品吗？',
						success:res=>{
							if(res.confirm){
								this.donwStore(id,'0')
							}
						}
					})
				}
			 },
			 
			 // 单商品上架
			 toUpStore(id){
				 uni.showModal({
				 	content:'确定上架该商品吗？',
				 	success:res=>{
				 		if(res.confirm){
				 			this.donwStore(id,'1')
				 		}
				 	}
				 }) 
			 },
			 // 批量上架
			 toUpStoreAll(){
				let lstId = []
				this.shopList.map(item=>{
					if(item.checked){
						lstId.push(item.product_id)
					}
				})
				let id = lstId.join(',')
				console.log(id,'批量上架id')
				if(!id){
					uni.showToast({
						title:'请选择需要上架的商品',
						icon:'none'
					})
					return
				}else{
					uni.showModal({
						content:'确定要上架所选商品吗？',
						success:res=>{
							if(res.confirm){
								this.donwStore(id,'1')
							}
						}
					})
				}
			 },
			
			// 在售商品上下架
			donwStore(id,status){
				let params = {
					status:status,
					id_lst:id,
					store_id:this.store_id
				}
				this.$api.getShopUpStore(params).then(res=>{
					console.log(res,'上下架操作')
					if(res.code==1){
						uni.showToast({
							title:status==0?'下架成功':'上架成功',
							icon:'success'
						})
						this.moreStatus = false
						this.getSaleList()
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			
			
			
			
			// 单个移除至回收站 、、or回收站删除
			toDelShop(id){
				if(this.current!=3){
					uni.showModal({
						content:'确定要将该商品移至回收站吗？',
						success:res=>{
							if(res.confirm){
								this.delShopToRoom(id,'0')
							}
						}
					})
				}else{
					uni.showModal({
						content:'确定要将商品彻底删除吗？',
						success:res=>{
							if(res.confirm){
								this.delRoomShop(id)
							}
						}
					})
				}
			},
			// 批量移除至回收站、、or回收站删除
			toDelShopAll(){
				let lstId = []
				this.shopList.map(item=>{
					if(item.checked){
						lstId.push(item.product_id)
					}
				})
				let id = lstId.join(',')
				console.log(id,'批量移除或删除id')
				if(!id){
					uni.showToast({
						title:this.current==3?'请选择需要删除的商品':'请选择需要移除的商品',
						icon:'none'
					})
					return
				}else{
					if(this.current!=3){
						uni.showModal({
							content:'确定要将所选商品移至回收站吗？',
							success:res=>{
								if(res.confirm){
									this.delShopToRoom(id,'0')
								}
							}
						})
					}else{
						uni.showModal({
							content:'确定要将所选商品彻底删除吗？',
							success:res=>{
								if(res.confirm){
									this.delRoomShop(id)
								}
							}
						})
					}
				}
			},
			
			// 单商品复原
			toReset(id){
				uni.showModal({
					content:'确定要复原该商品吗？',
					success:res=>{
						if(res.confirm){
							this.delShopToRoom(id,'1')
						}
					}
				})
			},
			// 批量复原
			toResetAll(){
				let lstId = []
				this.shopList.map(item=>{
					if(item.checked){
						lstId.push(item.product_id)
					}
				})
				let id = lstId.join(',')
				console.log(id,'批量复原id')
				if(!id){
					uni.showToast({
						title:'请选择需要复原的商品',
						icon:'none'
					})
					return
				}else{
					uni.showModal({
						content:'确定要将所选商品复原吗？',
						success:res=>{
							if(res.confirm){
								this.delShopToRoom(id,'1')
							}
						}
					})
				}
			},
			
			// 在售商品删除到回收站or复原
			delShopToRoom(id,status){
				let params = {
					recycle:status,
					id_lst:id,
					store_id:this.store_id
				}
				this.$api.delToDelRoom(params).then(res=>{
					console.log(res,'复原移除操作')
					if(res.code==1){
						uni.showToast({
							title:status==1?'复原成功':'移除成功',
							icon:'success'
						})
						this.moreStatus = false
						this.getSaleList()
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			
			// 回收站商品彻底删除
			delRoomShop(id){
				let params = {
					id_lst:id,
					store_id:this.store_id
				}
				this.$api.delRoomShop(params).then(res=>{
					console.log(res,'彻底删除')
					if(res.code==1){
						uni.showToast({
							title:'删除成功',
							icon:'success'
						})
						this.moreStatus = false
						this.getSaleList()
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{height: 100%;}
	@import '../../iconfont.css';
	.shopManage{
		height: 100%;
		background-color: #fff;
		// 导航栏
		.s_navBar {position: absolute;top: 0;left: 0; z-index: 10;
			.s_nCenter {width: 100%;}
			.s_nBg {width: 100vw;background: rgba(255,255,255,0.1);position: fixed;top: 0;left: 0;z-index: -1;filter: blur(1px);}
			.s_nInput {color: #939393;width: 400rpx;height: 66rpx;border: 2rpx solid rgba(255,255,255,0.5); background: rgba(255,255,255,0.1);padding: 0 64rpx;border-radius: 36rpx;position: relative;
				& > input {height: 100%;font-size: 24rpx;}
			}
			.s_nIcon {width: 28rpx;height: 28rpx;line-height: 28rpx;color: #939393;font-size: 28rpx;position: absolute;top: 50%;left: 28rpx;margin-top: -14rpx;}
		}
		.nar-bar{
			position: fixed;
			left: 0;
			top: 0;
			z-index: 1;
			height: 270rpx;
			width: 100%;
			background: url(https://manager.ryz1620.com/static/home-personal/personal-bg.png) no-repeat top;
			.icon-fanhui{
				color: #fff;
				font-size: 38rpx;
				margin-right: 35rpx;
			}
			.search-box {
				width: 100%;
				display: flex;
				align-items: center;
				padding: 0 28rpx;
				padding-top: 50rpx;
			}
			.search{
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 422rpx;
				height: 66rpx;
				border: 1px solid #FFFFFF;
				opacity: 0.5;
				// background: rgba(52,58,66,.5);
				border-radius: 34rpx;
				input{
					width: 82%;
					height: 100%;
					color: #FFFFFF;
				}
				.icon-sousuo{
					color: #FFFFFF;
					margin-left: 28rpx;
					
				}
			}
			.tabs{
				width: 100%;
				position: absolute;
				left: 0;
				bottom: 10rpx;
				// margin-top: 55rpx;
			}
		}
		// 筛选搜索
		.positBox{
			width: 100%;
			position: fixed;
			left: 0;
			z-index: 520;
			top: 270rpx;
			background-color: #fff;
			.searchBox{
				width: 100%;
				padding: 0 24rpx;
				.search{
					margin: 24rpx 0 0 0;
					position: relative;
					.icon-search2{
						position: absolute;
						top: 0rpx;
						left: 28rpx;
						font: 400 24rpx/66rpx PingFang SC;
					}
					input{
						width: 694rpx;
						height: 66rpx;
						background-color: #f5f5f5;
						border-radius: 34rpx;
						font: 400 24rpx/66rpx PingFang SC;
						color: #939393;
						padding: 0 64rpx;
					}
				}
			}
			.select{
				width: 100%;
			}
		}
		.content{
			padding: 440rpx 0 0 0;
			background-color: #fff;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			// 商品列表
			.shopList{
				padding:0 24rpx;
				margin-bottom: 116rpx;
				.item{
					display: flex;
					margin-top: 24rpx;
					align-items: center;
					justify-content: space-between;
					.left{
						margin-right: 24rpx;
						padding-bottom: 24rpx;
						.selectSendOk{
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							width: 36rpx;
							height: 36rpx;
							border-radius: 50%;
							border: 2rpx solid #D8D8D8;
							background-color: #fff;
							color: transparent;
							margin-bottom: 12rpx;
						}
						// 选中
						.sendActive{
							background-color: #DBA954;
							color: #fff;
							border-color: #DBA954;
						}
					}
					.rightBox{
						width: 100%;
						padding-bottom: 24rpx;
						border-bottom: 2rpx solid #F5F5F5;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.mid{
							width: 160rpx;
							height: 160rpx;
							margin-right:24rpx;
							border-radius: 8rpx;
							flex-shrink: 0;
							image{
								flex-shrink: 0;
								width: 100%;
								height: 100%;
								border-radius: 8rpx;
							}
						}
						.right{
							width: 100%;
							// width: 458rpx;
							font: 400 26rpx/40rpx PingFang SC;
							color: #505050;
							.top1{
								min-height: 80rpx;
							}
							.bottom{
								display: flex;
								margin-top: 12rpx;
								flex-direction: column;
								font: 400 22rpx/20rpx PingFang SC;
								color: #A0A0A0;
								.top{display: flex;.num{margin-left: 120rpx;}}
								.more{
									width: 100%;
									display: flex;
									align-items: center;
									justify-content: space-between;
									span{
										font: 400 26rpx/34rpx PingFang SC;
										color: #DBA954;
									}
									.right{
										width: 52rpx;
										height: 52rpx;
										position: relative;
										image{
											width: 52rpx;
											height: 52rpx;
											// border-radius: 16rpx;
										}
										.moreBox{
											position: absolute;
											left: -276rpx;
											bottom: 0;
											width: 260rpx;
											height: 96rpx;
											display: flex;
											align-items: center;
											padding: 8rpx 24rpx;
											justify-content: space-between;
											background-color: rgba(0,0,0,0.6);
											border-radius: 8rpx 8rpx 0px 8rpx;
											.edit{
												.iconfont{margin-bottom: 15rpx;}
												display: flex;
												flex-direction: column;
												justify-content: space-between;
												align-items: center;
												font: 400 22rpx/20rpx PingFang SC;
												color: #fff;
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}
		// 按钮
		// 按钮
		.btn{
			width: 100%;
			height: 92rpx;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			z-index:10;
			justify-content: space-between;
			padding: 0 24rpx;
			height: calc(92rpx+ constant(safe-area-inset-bottom));
			height: calc(92rpx + env(safe-area-inset-bottom));
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			.left{
				display: flex;
				align-items: center;
				font: 400 22rpx/20rpx PingFang SC;
				color: #A0A0A0;
				.selectSendOk{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 36rpx;
					height: 36rpx;
					border-radius: 50%;
					border: 2rpx solid #D8D8D8;
					background-color: #fff;
					color: transparent;
					margin-right: 16rpx;
					// margin-bottom: 12rpx;
				}
				// 选中
				.sendActive{
					
					background-color: #DBA954;
					color: #fff;
					border-color: #DBA954;
				}
			}
			.btnList{
				display: flex;
				justify-content: space-between;
				.btn_item{
					// width: 156rpx;
					height: 60rpx;
					border-radius: 32rpx;
					border: 2rpx solid #505050;
					font: 400 24rpx/60rpx PingFang SC;
					color: #505050;
					text-align: center;
					padding: 0 34rpx;
					margin:16rpx 0 16rpx 20rpx;
				}
				.active{
					border-color: #DBA954;
					color: #DBA954;
					// background-color: #DBA954;
				}
			}
		}
	}
</style>
